<template>
  <div class="info-contain">
    <!-- 顶部导航组件 -->
    <navbar @back="back" title="我的资料"></navbar>
    <div class="user-info">
      <!-- 利用vuex中的全局数据渲染页面 -->
      <!-- 头像单元格 -->
      <van-cell title="头像" is-link center class="avatar" @click="toAvatar">
        <template #default>
          <!-- <img src="../../../assets/zhou.jpg" alt="" /> -->
          <img :src="baseUrl + user.avatar" alt="" />
        </template>
      </van-cell>
      <!-- 其他信息 -->
      <van-cell-group class="other-info">
        <van-cell title="昵称" is-link @click="toNickName">
          <template #default>
            {{ user.nickname }}
          </template>
        </van-cell>
        <van-cell
          title="性别"
          :value="gender[user.gender]"
          is-link
          @click="openGender"
        ></van-cell>
        <van-cell title="地区" is-link @click="openArea">
          <template #default>
            {{ areaList.city_list[user.area] }}
          </template>
        </van-cell>
        <van-cell title="个人简介" is-link @click="toIntro">
          <template #default>
            {{ user.intro }}
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 退出按钮 -->
      <van-button color="#E40137" plain size="large" class="out" @click="quit"
        >退出登录</van-button
      >
    </div>
    <!-- 弹出性别面板 -->
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
    <van-popup v-model="genderShow" position="bottom">
      <!-- 选择框 -->
      <van-picker
        v-if="genderRefresh"
        show-toolbar
        :columns="columns"
        @confirm="sureGender"
        @cancel="onCancel"
        :default-index="user.gender"
      />
    </van-popup>
    <!-- 弹出城市面板 -->
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
    <van-popup v-model="cityShow" position="bottom">
      <!-- 选择框 -->
      <van-area
        @confirm="sureArea"
        @cancel="areaCancel"
        :area-list="areaList"
        :value="user.area"
        :columns-num="2"
      />
    </van-popup>
  </div>
</template>

<script>
// 导入vuex辅助函数
import { mapState, mapMutations, mapActions } from 'vuex'
// 导入token工具函数
import { removeToken } from '../../../utils/token.js'
// 导入地区插件
import { areaList } from '@vant/area-data'
// 导入请求方法
import { editInfo } from '../../../api/login.js'
export default {
  name: 'info',
  data () {
    return {
      // 基地址
      baseUrl: process.env.VUE_APP_URL,
      // 城市数据
      areaList,
      // 是否显示性别弹出框
      genderShow: false,
      // 性别数组
      columns: ['未知', '男', '女'],
      // 是否显示城市弹出框
      cityShow: false,
      // 性别刷新
      genderRefresh: true
    }
  },
  methods: {
    // 添加修改登录状态的辅助工具
    ...mapMutations(['setIsLogin']),
    ...mapActions(['upDateUser']),
    // 跳转修改头像页面
    toAvatar () {
      this.$router.push('/editInfo?prop=avatar')
    },
    // 跳转到修改昵称页面
    toNickName () {
      this.$router.push('/editInfo?prop=nickname')
    },
    // 跳转到编辑简介页面
    toIntro () {
      this.$router.push('/editInfo?prop=intro')
    },
    // 确定城市选择
    async sureArea (arr) {
      this.$toast({
        type: 'loading',
        message: '正在修改......',
        duration: 0
      })
      // 获取当前城市编号并发起修改请求
      const code = arr[1].code
      await editInfo({ area: code })
      // 再次请求用户信息更新到vuex中
      this.upDateUser()
      // 关闭选择框
      this.cityShow = false
      // 清除提示框
      this.$toast.clear()
    },
    // 关闭城市选择框
    areaCancel () {
      this.cityShow = false
    },
    // 打开城市选择框
    openArea () {
      this.cityShow = true
    },
    // 性别选择框确认事件
    async sureGender (value, index) {
      this.$toast({
        type: 'loading',
        message: '正在修改......',
        duration: 0
      })
      // 获取当前性别编号
      // console.log(value, index)
      await editInfo({ gender: index })
      // 再次请求用户信息更新到vuex中
      // const res = await getInfo()
      // this.$store.commit('setUser', res.data.data)
      // console.log(res)
      this.upDateUser()
      // 关闭选择框
      this.genderShow = false
      // 清除提示框
      this.$toast.clear()
    },
    // 性别选择框取消事件
    onCancel () {
      this.genderShow = false
    },
    // 打开性别选择框
    openGender () {
      this.genderShow = true
      // 静默刷新： picker
      this.genderRefresh = false
      setTimeout(() => {
        this.genderRefresh = true
      }, 100)
    },
    // 退出登录
    quit () {
      // 导入弹框
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否要退出登录'
        })
        .then(() => {
          // 删除token
          removeToken()
          // 修改vuex中的isLogin状态
          this.setIsLogin(false)
          // 跳转到登录页面
          this.$router.push('/login')
        })
        .catch(() => {
          console.log('取消退出')
        })
    },
    // 返回到我的页面
    back () {
      this.$router.push('/home/my')
    }
  },
  // 在计算属性中使用mapState工具函数
  computed: {
    ...mapState(['user', 'gender'])
  }
}
</script>

<style lang="less" scoped>
.info-contain {
  height: 100vh;
  background-color: #f7f4f5;
  .user-info {
    padding: 0 15px;
    .avatar {
      margin-top: 20px;
      border-radius: 10px;
      img {
        width: 40px;
        height: 40px;
        opacity: 1;
        border-radius: 50%;
        vertical-align: bottom;
      }
    }
    .other-info {
      margin-top: 20px;
      border-radius: 10px;
      overflow: hidden;
    }
  }
  .out {
    margin-top: 15px;
    border: none;
  }
}
</style>
